<template>
	<div>
		<div class="record-box" v-for="(re,key) in pageList">
			<span class="record-time">{{key}}</span>
			<div class="record-list" v-for="z in re">
				<div class="record-info">
					<div class="image-box">
						<image src="../../../static/img/gashaponImg/stone.png" mode="aspectFill"
							class="image64"></image>
					</div>
					<div class="right-info">
						<span class="jiu-font28-fff">{{z.title}}</span>
						<span class="jiu-font24-555" style="margin-top: 0.27vw;display: block;">{{z.createTime}}</span>
					</div>
				</div>
				<span class="get-text" :class="{'now':z.amountDirection == '-1'}">{{ z.amountDirection == '-1' ? '-' : '+' }}{{ z.amount }}灵石</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props: {
			item: {
				type: Array,
				default:[]
			}
		},
		computed:{
			pageList(){
				const obj = {};
				this.item.forEach(item => {
					const arr = item.createTime.split(' ');
					const time = arr[0].split('-');
					const key = `${time[0]}年${time[1]}月`
					if(obj[key])obj[key].push(item)
					else obj[key] = [item]
				})
				return obj;
			}
		},
		watch:{
			item:{
				handler(val){
					console.log(val)
				},deep:true
			}
		}
	}
</script>

<style lang="scss">
	
	.record-box {
		display: flex;
		flex-direction: column;
		margin-top: 8.53vw;
		padding-left: 5.33vw;
	
		.record-time {
			color: #555555;
			font-size: 4.27vw;
			font-weight: 300;
			margin-bottom: 1.6vw;
			display: block;
		}
	
		.record-list {
			background-color: #1b1b1b;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 3.2vw 5.33vw 3.2vw 4.27vw;
			border-radius: 12.8vw 0 0 12.8vw;
			margin-top: 2.67vw;
			.record-info{
				display: flex;
				.image-box {
					width: 10.67vw;
					height: 10.67vw;
					border-radius: 50%;
					background-color: #000;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.image64 {
						width: 6.4vw;
						height: 6.4vw;
					}
				}
				
				.right-info{
					display: flex;
					flex-direction: column;
					margin-left: 2.13vw;
				}
			}
			
			.get-text{
				font-size: 3.73vw;
				font-weight: 500;
				color: #FFCE80;
			}
		}
	}
	.now{
		color: #A972FF !important;
	} 
</style>